<template>
	<view class="container">
		<u-image width="100%" height="300rpx" :src="wrapResCover(document)"></u-image>
		<view class="title">
			{{document.title}}
		</view>
		<view class="desc">
			<view class="desc-item">
				{{document.visitorCount === null ? 0 : document.visitorCount}}人
			</view>
			<view class="desc-item">
				分类：{{document.dirTitle}}
			</view>
			<view class="desc-item-link" @click="toolClick(document)">
				查看附件
			</view>
		</view>

		<view v-if="teacher" class="teacher-view">
			<view class="more-view">
				<u-image :src="teacher.headImgUrl" width="100rpx" height="100rpx" class="icon" shape="circle"/>
				<view class="info-view">
					<view class="name">{{document.staffName}}</view>
					<view class="role">托育培训师</view>
				</view>
			</view>
<!-- 			<view class="teacher-desc">
				简介： 立足于家长的实际需求，孩子的实际问题分析，解决家庭教育中的实际问题，帮助家长把孩子培养成具有独立人格，积极阳光的未来人生赢家，至于学习成绩的提高，只是诸多好处之一而已。
			</view> -->
		</view>
		
		<u-tabs class="detail-view" 
			:active-color="appTheme.checkColor" 
			:list="list1" 
			:is-scroll="false" 
			:current="current" 
			@change="change"></u-tabs>
			
			<view v-show="current === 0">
				<view v-html="document.attachJSON"></view>
			</view>
<!-- 			<view v-show="current === 1">
				评论
			</view> -->
			
		<u-popup v-model="audioShow" mode="bottom" @close="audioClose">
			<view style="padding: 30rpx;">
				<wxy-audio 
					:src="audioSrc"
					:play.sync="audioPlay"
				/>
			</view>
		</u-popup>
		
		<u-popup v-model="videoShow" mode="bottom" @close="videoClose">
			<view style="padding: 30rpx;display: flex;justify-content: center;align-items: center;">
				<video
					class="video"
					id="myVideo"
					:src="videoSrc"
					autoplay="true"
				/>
			</view>
		</u-popup>
		
		<u-action-sheet :list="list" v-model="actionShow" @click="actionClick"></u-action-sheet>
	</view>
</template>

<script>
	import { getDocument } from '@/api/document.js'
	import { getTeacherByStaffId } from '@/api/user.js'
	import appMixin from '@/mixins/app.js'
	export default {
		mixins: [appMixin],
		data() {
			return {
				document: {},
				teacher: {},
				
				list1: [{
					name: '课程概述'
				}],
				current: 0,
				
				audioShow: false,
				audioPlay: false,
				audioSrc: '',
				
				videoShow: false,
				videoSrc: '',
				
				toolItem: {},
				actionShow: false,
				list: [{
					text: '应用内打开',
				}, {
					text: '系统应用打开'
				}],
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getDocument()
		},
		methods: {
			getDocument() {
				getDocument(this.id).then(res => {
					console.log(res);
					this.document = res.data;
					this.getTeacher();
				})
			},
			
			getTeacher() {
				getTeacherByStaffId(this.document.createdBy).then(res => {
					console.log(res);
					this.teacher = res.data;
				})
			},
			
			change(index) {
				this.current = index;
			},
			
			wrapResCover(item) {
				if (item.resType === "1") {
					return item.resURL;
				}
				return item.cover;
			},
			
			toolClick(item) {
				console.log(item);
				this.toolItem = item;
				if (item.resType === 'pdf') {
					// this.actionShow = true;
					const port = uni.getSystemInfoSync().platform
					if (port === 'android') {
						this.actionShow = true;
					} else {
						this.openDocument(item.resURL)
					}
				} else if (item.resType === 'radio') {
					this.audioSrc = item.resURL;
					this.audioShow = true;
					// this.play = true
				} else if (item.resType === 'video') {
					// #ifdef APP
						this.$u.route({
							url: 'pages_base/common/player/player',
							params: {
								url: item.resURL,
								title: item.title,
								update: 'false'
							}
						})
					// #endif
					// #ifdef MP
						this.videoSrc = item.resURL;
						this.videoShow = true
					// #endif
				} else if (item.resType === 'image') {
					const resourceUrls = [item.resURL]
					uni.previewImage({
						urls: resourceUrls,
						current: 0,
					});
				}
			},
			
			openDocument(url) {
				uni.showLoading({title: '正在加载文件'})
				uni.downloadFile({//下载对应文件
				  url: url,
				  success: function (res) {
					console.log(res);
					var filePath = res.tempFilePath;//文件路径
					uni.openDocument({
					  filePath: filePath,//装载对应文件的路径
					  fileType: 'pdf',//指定打开的文件类型
					  success: function (res) {
						console.log("打开成功");
					  },
					  fail: function (res) {
						console.log(res);
					  }
					})
			
				  },
				  fail: function (res) {
					console.log(res);
					this.$u.toast('加载失败')
				  },
				  complete() {
				  	uni.hideLoading()
				  }
				})
			},
			
			audioClose() {
				this.audioPlay = false
			},
			
			videoClose() {
				this.videoContext.stop()
			},
			
			actionClick(index) {
				const item = this.toolItem;
				console.log(item);
				// const url = `https://mozilla.github.io/pdf.js/web/viewer.html?file=${item.imgUrl}`; 
				const url = item.imgUrl;
				console.log(url);
				if (index === 0) {
					// https://saas.res.dotflat.cn/teach/file/course/common/admin_1651136021332.pdf
					this.$u.route({
						url: '/pages_base/common/pdf-page',
						params: {
							url: url
						}
					})
				} else {
					this.openDocument(item.imgUrl)
				}
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $app-page-bg-color;
	}
	
	.container{
		display: flex;
		flex-direction: column;
		padding-left: $app-page-padding;
		padding-right: $app-page-padding;
		
		.title {
			font-size: $app-font-size-lg;
			color: $app-font-color;
			font-weight: bold;
			margin-top: 20rpx;
		}
		
		.desc {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 20rpx;
			color: $app-font-color;
			font-size: $app-font-size-md;
			.desc-item{
				width: 0;
				flex-grow: 1;
			}
			
			.desc-item-link{
				width: 0;
				flex-grow: 1;
				text-align: right;
				text-decoration: underline;
			}
		}
	}
	
	.teacher-view{
		margin-top: 30rpx;
		color: $app-font-color;
		font-size: $app-font-size-md;
		
		.more-view{
			display: flex;
			flex-direction: row;
			align-items: center;
			.icon{
				
			}

			.info-view{
				display: flex;
				flex-direction: column;
				margin-left: 30rpx;
				.name{
					color: $app-font-color;
					font-size: $app-font-size-md;
				}
				
				.role{
					color: $app-font-desc-color;
					font-size: $app-font-size-sm;
				}
			}
		}
		
		.teacher-desc{
			margin-top: 20rpx;
		}
	}
	
	.detail-view{
		margin-top: 30rpx;
	}

</style>
